$(function () {
  var q = {
    pagenum: 1, // 页码值，默认请求第一页的数据
    pagesize: 2, // 每页显示几条数据，默认每页显示2条
    cate_id: "", // 文章分类的 Id
    state: "", // 文章的发布状态
  };
  // 定义美化时间的过滤器
  template.defaults.imports.dataFormat = function (date) {
    const dt = new Date(date);
    var y = dt.getFullYear();
    var m = padZero(dt.getMonth() + 1);
    var d = padZero(dt.getDate());
    var hh = padZero(dt.getHours());
    var mm = padZero(dt.getMinutes());
    var ss = padZero(dt.getSeconds());
    return y + "-" + m + "-" + d + " " + hh + ":" + mm + ":" + ss;
  };
  // 定义补零的函数
  function padZero(n) {
    return n > 9 ? n : "0" + n;
  }

  var layer = layui.layer;
  // 获取文章列表数据的方法
  function initTable() {
    $.ajax({
      method: "GET",
      url: "/my/article/list",
      data: q,
      success: function (res) {
        if (res.code !== 0) {
          return layer.msg("获取文章列表失败！");
        }
        // 使用模板引擎渲染页面的数据
        var htmlStr = template("tpl-table", res);
        $("tbody").html(htmlStr);
        renderPage(res.total); //调用渲染分页的方法
      },
    });
  }
  initTable();

  var form = layui.form;
  function initCate() {
    $.ajax({
      method: "GET",
      url: "/my/cate/list",
      success: function (res) {
        if (res.code !== 0) {
          return layer.msg("获取文章列表失败！");
        }
        console.log(res);
        var htmlStr = template("tpl-cate", res);
        $("[name=cate_id]").html(htmlStr);
        // 通过 layui 重新渲染表单区域的UI结构
        form.render();
      },
    });
  }
  initCate();
  $("#form-search").on("submit", function (e) {
    e.preventDefault();
    // 获取表单中选中项的值
    var cate_id = $("[name=cate_id]").val();
    var state = $("[name=state]").val();
    // 为查询参数对象 q 中对应的属性赋值
    q.cate_id = cate_id;
    q.state = state;

    // 根据最新的筛选条件，重新渲染表格的数据
    initTable();
  });
  var laypage = layui.laypage;
  //定义渲染分页的方法
  function renderPage(total) {
    // console.log(total);
    laypage.render({
      elem: "pageBox",
      count: total,
      limit: q.pagesize,
      curr: q.pagenum,
      layout: ["count", "limit", "prev", "page", "next", "skip"],
      limits: [2, 3, 5, 10], // 每页展示多少条

      // 分页发生切换的时候，触发 jump 回调
      // 触发 jump 回调的方式有两种：
      // 1. 点击页码的时候，会触发 jump 回调
      // 2. 只要调用了 laypage.render() 方法，就会触发 jump 回调
      jump: function (obj, first) {
        // 可以通过 first 的值，来判断是通过哪种方式，触发的 jump 回调
        // 如果 first 的值为 true，证明是方式2触发的
        // 否则就是方式1触发的

        // console.log(obj.curr);
        // 把最新的页码值，赋值到 q 这个查询参数对象中
        q.pagenum = obj.curr;
        q.pagesize = obj.limit;

        if (!first) {
          initTable();
        }
      },
    });
  }
  $("tbody").on("click", ".btn-delete", function () {
    // 获取到文章的 id
    var id = $(this).attr("data-id");
    // 获取删除按钮的个数
    var len = $(".btn-delete").length;

    // 询问用户是否要删除数据
    layer.confirm("确认删除?", { icon: 3, title: "提示" }, function (index) {
      $.ajax({
        method: "DELETE",
        url: "/my/article/info/?id=" + id,
        success: function (res) {
          if (res.code !== 0) {
            return layer.msg("删除文章失败！");
          }
          layer.msg("删除文章成功！");
          if (len === 1) {
            // 如果 len 的值等于1，证明删除完毕之后，页面上就没有任何数据了
            // 页码值最小必须是 1
            q.pagenum = q.pagenum === 1 ? 1 : q.pagenum - 1;
          }

          initTable();
        },
      });
      layer.close(index);
    });
  });
});
